﻿@{
    string element = ViewBag.Element;
    string imgPath = ViewBag.BgPath;
    string prefix = ViewBag.IdPrefix;
}
<style>
    #StyleTabs .ui-tabs-panel { padding: 0px; border-left: none; border-right: none; border-bottom: none; }
</style>
@Html.Hidden("currentDesignElement", element)
@{ Ajax.Dna().Tabs("StyleTabs")
       .Views(views =>
       {
           views.Add(Html.Global("RES_STYLE")).Template(@<text>
    <div style="background-color: #ffffff; color: #000000; padding: 5px; font-weight: normal;
        overflow: visible;">
        <section>
            <header class="d-section">
                <span>@Html.Global("RES_BG_IMAGE")</span><hr />
            </header>
            @(Ajax.Dna().ImageFileListBox(prefix + "PageBackgroundImageListBox", Url.Action("GetFiles", "WebFiles", new { Area = "", url = imgPath }), "POST")
                .Options(opts =>
                {
                    opts.IsInlineMode = true;
                    opts.OnItemSelected = "setBGImage(\"" + element + "\",ui.value);";
                })
                .HtmlAttributes(new { style = "border:none;height:100px;width:535px;" })
                .GetHtml()
            )
            <table>
                <tr>
                    <td>
                        @(
 Ajax.Dna().Button(prefix + "btnClearBackground")
                .ChangeType(ButtonTypes.ImageButton)
                .Click("clearBG(\"" + element + "\");")
                .Images(Url.Content("~/content/images/icon_clear.png"))
                .GetHtml()
                )
                    </td>
                    <td>
                        @Html.Global("RES_CLEARBG")
                    </td>
                    <td>
                        @(
 Ajax.Dna().Button(prefix + "btnUploadFile")
            .ChangeType(ButtonTypes.LinkButton)
            .LocText("RES_UPLOAD")
            .ImageIcons(Url.Content("~/content/images/icon_attach_16.png"))
            .GetHtml())
                        @{Ajax.Dna().Uploader(prefix + "btnUploadFile")
            .Options(opts =>
            {
                opts.Action = imgPath;
                opts.OnCompleted = "if (response!=\"OK\") $dna.showDlg(\"Message\",response); else setBGImage(\"" + element + "\",\"" + imgPath + "/\"+file);";
            })
            .Render();}
                    </td>
                </tr>
            </table>
        </section>
        <section>
            <header class="d-section">
                <span>@Html.Global("RES_BACKGROUND")</span><hr />
            </header>
            <table style="margin-top: 5px;" cellpadding="5">
                <tr>
                    <td>
                        @Html.Global("RES_COLOR"):
                    </td>
                    <td>
                        @(Ajax.Dna().ColorPicker(prefix + "PageBackColor")
                                .Options(opts =>
                                {
                                    opts.AllowInput = true;
                                    opts.DropDown = true;
                                    opts.OnColorSelected = "setBGColor(\"" + element + "\",ui.value);";
                                }).GetHtml()
                                )
                    </td>
                    <td>@Html.Global("RES_OPACITY"):
                    </td>
                    <td style="width: 100px;">
                        @( Ajax.Dna().Slider(prefix + "OpacitySlider")
                               .FillTextTo("elementOpacity")
                               .Options(opts => { opts.OnSliding = "setOpacity(\"" + element + "\",ui.value);"; })
                               .Value(100).GetHtml())
                    </td>
                    <td id="elementOpacity">
                        100
                    </td>
                    <td>
                        @Html.Global("RES_BG_REPEAT"):
                    </td>
                    <td>
                        @(
 Ajax.Dna().ComboBox(prefix + "RepeatCombo")
                            .Width(80)
                            .DropDownStyle(DropdownStyles.DropdownList)
                            .Options(opts => { opts.OnItemSelected = "setRepeat(\"" + element + "\",ui.value);"; })
                            .Select("inherit")
                            .Bind(new string[] { "inherit", "no-repeat", "repeat", "repeat-x", "repeat-y" })
                           .GetHtml()
                    )
                    </td>
                </tr>
            </table>
        </section>
        <section>
            <header class="d-section">
                <span>@Html.Global("RES_FONT_STYLE")</span><hr />
            </header>
            <table style="margin-top: 5px;" cellpadding="5">
                <tr>
                    <td>
                        @Html.Global("RES_COLOR"):
                    </td>
                    <td>
                        @(Ajax.Dna().ColorPicker(prefix + "FontColorPicker")
                                .Options(opts =>
                                {
                                    opts.AllowInput = true;
                                    opts.DropDown = true;
                                    opts.OnColorSelected = "setColor(\"" + element + "\",ui.value);";
                                })
                                .GetHtml()
                        )
                    </td>
                    <td>
                        @Html.Global("RES_FONT_FAMILY"):
                    </td>
                    <td colspan="3">
                        @(   Ajax.Dna().ComboBox(prefix + "FamilyCombo")
                                .Width(220)
                                .DropDownStyle(DropdownStyles.DropdownList)
                                .Options(opts => { opts.OnItemSelected = "setFamily(\"" + element + "\",ui.value);"; })
                                .Select("inherit")
                                .Bind(new string[] { "inherit", 
                                    "Arial", 
                                    "Courier New,Courier,monospace",
                                    "Georgia,serif", 
                                    "Impact,Charcoal,sans-serif",
                                    "Lucida Console,Monaco,monospace",
                                    "Tahoma,Geneva,sans-serif",
                                    "Times New Roman,Times,serif",
                                    "Trebuchet MS,Helvetica,sans-serif",
                                    "Verdana,Geneva,sans-serif"
                                }).GetHtml()
                                )
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.Global("RES_WEIGHT"):
                    </td>
                    <td>
                        @(
 Ajax.Dna().ComboBox(prefix + "FontWeightCombo")
                            .DropDownStyle(DropdownStyles.DropdownList)
                            .Options(opts => { opts.OnItemSelected = "setFontWeight(\"" + element + "\",ui.value)"; })
                            .Select("inherit")
                            .Width(80)
                           .Bind(new string[] { "lighter", "normal", "bold", "bolder", "100", "200", "300", "400", "500", "600", "700", "800", "900", "inherit" })
                           .GetHtml()
                        )
                    </td>
                    <td>
                        @Html.Global("RES_ALIGN"):
                    </td>
                    <td>
                        @(
 Ajax.Dna().ComboBox(prefix + "TextAlignCombo")
                            .DropDownStyle(DropdownStyles.DropdownList)
                            .Options(opts => { opts.OnItemSelected = "setTextAlign(\"" + element + "\",ui.value);"; })
                            .Select("inherit")
                            .Width(80)
                            .Bind(new string[] { "center", "justify", "left", "right", "inherit" })
                            .GetHtml()
                       )
                    </td>
                    <td>
                        @Html.Global("RES_SIZE"):
                    </td>
                    <td style="width: 100px;">
                        @( Ajax.Dna().Slider(prefix + "FontSizeSlider")
                               .Options(opts => { opts.OnSliding = "setFontSize(\"" + element + "\",ui.value);"; })
                               .FillTextTo(prefix + "fontSizeText")
                               .Value(0)
                               .Maximum(60)
                               .GetHtml()
                    )
                    </td>
                    <td>
                        <span id="@(prefix + "fontSizeText")"></span>pt
                    </td>
                </tr>
            </table>
        </section>
        <section>
            <header class="d-section">
                <span>@Html.Global("RES_SIZE")</span><hr />
            </header>
            <table style="margin-top: 5px;" cellpadding="5">
                <tr>
                    <td>
                        @Html.Global("RES_WIDTH"):
                    </td>
                    <td style="width: 150px;">
                        @( Ajax.Dna().Slider(prefix + "WidthSlider")
                               .Options(opts => { opts.OnSliding = "$(\"" + element + "\").width(ui.value);"; })
                               .FillTextTo(prefix + "widthValue")
                               .Maximum(1600)
                               .Value(0)
                               .GetHtml()
                        )
                    </td>
                    <td id="@(prefix + "widthValue")">
                    </td>
                    <td>
                        px
                    </td>
                    <td>
                        @Html.Global("RES_HEIGHT"):
                    </td>
                    <td style="width: 150px;">
                        @( Ajax.Dna().Slider(prefix + "HeightSlider")
                                .Options(opts => { opts.OnSliding = "$(\"" + element + "\").height(ui.value);"; })
                                .FillTextTo(prefix + "heightValue")
                                .Maximum(1600)
                                .Value(0).GetHtml())
                    </td>
                    <td id="@(prefix + "heightValue")">
                    </td>
                    <td>
                        px
                    </td>
                </tr>
            </table>
        </section>
    </div>
    </text>);
           views.Add(Html.Global("RES_BOX")).Template(@<text>
    <div style="background-color: #ffffff; color: #000000; padding: 5px; font-weight: normal;
        overflow: visible;">
        <section>
            <header class="d-section">
                <span>@Html.Global("RES_BORDER")</span>
                <hr />
            </header>
            <table>
                <tr>
                    <th style="text-align: center; height: 30px; width: 100px;">
                        @Html.Global("RES_TYPE")
                    </th>
                    <th style="text-align: center;">
                        @Html.Global("UIDesigner_BorderStyle")
                    </th>
                    <th colspan="2" style="text-align: center;">
                        @Html.Global("UIDesigner_BorderSize")
                    </th>
                    <th style="text-align: center;">
                        @Html.Global("UIDesigner_BorderColor")
                    </th>
                </tr>
                <tr>
                    <td>
                        @Html.Global("RES_TOP")
                    </td>
                    <td style="padding: 0px 5px;">
                        @(Ajax.Dna().ComboBox("cbBorderTopStyles")
                                        .DropDownStyle(DropdownStyles.DropdownList)
                                        .Options(opts => { opts.OnItemSelected = "setBorderStyle(\"" + element + "\",\"top\",ui.value);"; })
                                        .Select("inherit")
                                        .Width(100)
                                        .Items(_items =>
                                        {
                                            _items.AddValue(Html.Global("RES_NONE"), "none");
                                            _items.AddValue(Html.Global("RES_SOLID"), "solid");
                                            _items.AddValue(Html.Global("RES_DASHED"), "dashed");
                                            _items.AddValue(Html.Global("RES_DOTTED"), "dotted");
                                            _items.AddValue(Html.Global("RES_DOUBLE"), "double");
                                            _items.AddValue(Html.Global("RES_GROOVE"), "groove");
                                            _items.AddValue(Html.Global("RES_RIDGE"), "Ridge");
                                            _items.AddValue(Html.Global("RES_INSET"), "inset");
                                            _items.AddValue(Html.Global("RES_OUTSET"), "outset");
                                            _items.AddValue(Html.Global("RES_INHERIT"), "inherit");
                                        })
                        .GetHtml())
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "BorderTopSlider")
                               .FillTextTo("elBorderTop")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.OnSliding = "setBorderSize(\"" + element + "\",\"top\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td>
                        <span id="elBorderTop">0</span>px
                    </td>
                    <td style="padding: 0px 5px;">
                        @(Ajax.Dna().ColorPicker(prefix + "BorderTopColorPicker")
                                .Options(opts =>
                                {
                                    opts.AllowInput = true;
                                    opts.DropDown = true;
                                    opts.OnColorSelected = "setBorderColor(\"" + element + "\",\"top\",ui.value);";
                                })
                                .GetHtml()
                        )
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.Global("RES_BOTTOM")
                    </td>
                    <td style="padding: 0px 5px;">
                        @(Ajax.Dna().ComboBox("cbBorderBottomStyles")
                                        .DropDownStyle(DropdownStyles.DropdownList)
                                                .Options(opts => { opts.OnItemSelected = "setBorderStyle(\"" + element + "\",\"bottom\",ui.value);"; })
                                        .Select("inherit")
                                        .Width(100)
                                        .Items(_items =>
                                        {
                                            _items.AddValue(Html.Global("RES_NONE"), "none");
                                            _items.AddValue(Html.Global("RES_SOLID"), "solid");
                                            _items.AddValue(Html.Global("RES_DASHED"), "dashed");
                                            _items.AddValue(Html.Global("RES_DOTTED"), "dotted");
                                            _items.AddValue(Html.Global("RES_DOUBLE"), "double");
                                            _items.AddValue(Html.Global("RES_GROOVE"), "groove");
                                            _items.AddValue(Html.Global("RES_RIDGE"), "Ridge");
                                            _items.AddValue(Html.Global("RES_INSET"), "inset");
                                            _items.AddValue(Html.Global("RES_OUTSET"), "outset");
                                            _items.AddValue(Html.Global("RES_INHERIT"), "inherit");
                                        })
                        .GetHtml())
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "BorderBottomSlider")
                                       .FillTextTo("elBorderBottom")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.OnSliding = "setBorderSize(\"" + element + "\",\"bottom\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td>
                        <span id="elBorderBottom">0</span>px
                    </td>
                    <td style="padding: 0px 5px;">
                        @(Ajax.Dna().ColorPicker(prefix + "BorderBottomColorPicker")
                                .Options(opts =>
                                {
                                    opts.AllowInput = true;
                                    opts.DropDown = true;
                                    opts.OnColorSelected = "setBorderColor(\"" + element + "\",\"bottom\",ui.value);";
                                })
                                .GetHtml()
                        )
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.Global("RES_LEFT")
                    </td>
                    <td style="padding: 0px 5px;">
                        @(Ajax.Dna().ComboBox("cbBorderLeftStyles")
                                        .DropDownStyle(DropdownStyles.DropdownList)
                                        .Options(opts => { opts.OnItemSelected = "setBorderStyle(\"" + element + "\",\"left\",ui.value);"; })
                                        .Select("inherit")
                                        .Width(100)
                                        .Items(_items =>
                                        {
                                            _items.AddValue(Html.Global("RES_NONE"), "none");
                                            _items.AddValue(Html.Global("RES_SOLID"), "solid");
                                            _items.AddValue(Html.Global("RES_DASHED"), "dashed");
                                            _items.AddValue(Html.Global("RES_DOTTED"), "dotted");
                                            _items.AddValue(Html.Global("RES_DOUBLE"), "double");
                                            _items.AddValue(Html.Global("RES_GROOVE"), "groove");
                                            _items.AddValue(Html.Global("RES_RIDGE"), "Ridge");
                                            _items.AddValue(Html.Global("RES_INSET"), "inset");
                                            _items.AddValue(Html.Global("RES_OUTSET"), "outset");
                                            _items.AddValue(Html.Global("RES_INHERIT"), "inherit");
                                        })
                        .GetHtml())
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "BorderLeftSlider")
                               .FillTextTo("elBorderLeft")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.OnSliding = "setBorderSize(\"" + element + "\",\"left\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td>
                        <span id="elBorderLeft">0</span>px
                    </td>
                    <td style="padding: 0px 5px;">
                        @(Ajax.Dna().ColorPicker(prefix + "BorderLeftColorPicker")
                                .Options(opts =>
                                {
                                    opts.AllowInput = true;
                                    opts.DropDown = true;
                                    opts.OnColorSelected = "setBorderColor(\"" + element + "\",\"left\",ui.value);";
                                })
                                .GetHtml()
                        )
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.Global("RES_RIGHT")
                    </td>
                    <td style="padding: 0px 5px;">
                        @(Ajax.Dna().ComboBox("cbBorderRightStyles")
                                        .DropDownStyle(DropdownStyles.DropdownList)
                                        .Options(opts => { opts.OnItemSelected = "setBorderStyle(\"" + element + "\",\"right\",ui.value);"; })
                                        .Select("inherit")
                                        .Width(100)
                                        .Items(_items =>
                                        {
                                            _items.AddValue(Html.Global("RES_NONE"), "none");
                                            _items.AddValue(Html.Global("RES_SOLID"), "solid");
                                            _items.AddValue(Html.Global("RES_DASHED"), "dashed");
                                            _items.AddValue(Html.Global("RES_DOTTED"), "dotted");
                                            _items.AddValue(Html.Global("RES_DOUBLE"), "double");
                                            _items.AddValue(Html.Global("RES_GROOVE"), "groove");
                                            _items.AddValue(Html.Global("RES_RIDGE"), "Ridge");
                                            _items.AddValue(Html.Global("RES_INSET"), "inset");
                                            _items.AddValue(Html.Global("RES_OUTSET"), "outset");
                                            _items.AddValue(Html.Global("RES_INHERIT"), "inherit");
                                        })
                        .GetHtml())
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "BorderRightSlider")
                                       .FillTextTo("elBorderRight")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.OnSliding = "setBorderSize(\"" + element + "\",\"right\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td>
                        <span id="elBorderRight">0</span>px
                    </td>
                    <td style="padding: 0px 5px;">
                        @(Ajax.Dna().ColorPicker(prefix + "BorderRightColorPicker")
                                .Options(opts =>
                                {
                                    opts.AllowInput = true;
                                    opts.DropDown = true;
                                    opts.OnColorSelected = "setBorderColor(\"" + element + "\",\"right\",ui.value);";
                                })
                                .GetHtml()
                        )
                    </td>
                </tr>
            </table>
            <hr />
            <table>
                <tr>
                    <td>
                        @Html.Global("RES_CORNER")
                    </td>
                    <td style="padding: 0px 5px;">
                        @(Ajax.Dna().ComboBox(prefix + "cbCornerType")
                                        .DropDownStyle(DropdownStyles.DropdownList)
                                        .Select("0")
                                        .Width(130)
                                        .Items(_items =>
                                        {
                                            _items.AddValue(Html.Global("RES_ALL"), "0");
                                            _items.AddValue(Html.Global("RES_TOP"), "1");
                                            _items.AddValue(Html.Global("RES_BOTTOM"), "2");
                                            _items.AddValue(Html.Global("RES_LEFT"), "7");
                                            _items.AddValue(Html.Global("RES_RIGHT"), "8");
                                            _items.AddValue(Html.Global("RES_TOP_LEFT"), "3");
                                            _items.AddValue(Html.Global("RES_TOP_RIGHT"), "4");
                                            _items.AddValue(Html.Global("RES_BOTTOM_LEFT"), "5");
                                            _items.AddValue(Html.Global("RES_BOTTOM_RIGHT"), "6");
                                        })
                        .GetHtml())
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "CornerSlider")
                                       .FillTextTo("elCorner")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setCorner(\"" + element + "\",$(\"#" + prefix + "cbCornerType\").val(),ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td>
                        <span id="elCorner">0</span>px
                    </td>
                </tr>
            </table>
        </section>
        <section>
            <header class="d-section">
                <span>@Html.Global("RES_LAYOUT")</span>
                <hr />
            </header>
            <table>
                <tr>
                    <th style="text-align: center; height: 30px; width: 100px;">
                        @Html.Global("RES_TYPE")
                    </th>
                    <th colspan="2" style="text-align: center;">
                        @Html.Global("RES_PADDING")
                    </th>
                    <th colspan="2" style="text-align: center;">
                        @Html.Global("RES_MARGIN")
                    </th>
                </tr>
                <tr>
                    <td>
                        @Html.Global("RES_TOP")
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "PaddingTopSlider")
                                       .FillTextTo("elPaddingTop")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setPadding(\"" + element + "\",\"top\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td style="padding-right: 10px;">
                        <span id="elPaddingTop">0</span>px
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "MarginTopSlider")
                                       .FillTextTo("elMarginTop")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setMargin(\"" + element + "\",\"top\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td>
                        <span id="elMarginTop">0</span>px
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.Global("RES_BOTTOM")
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "PaddingBottomSlider")
                        .FillTextTo("elPaddingBottom")
                        .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setPadding(\"" + element + "\",\"bottom\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td style="padding-right: 10px;">
                        <span id="elPaddingBottom">0</span>px
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "MarginBottomSlider")
                                               .FillTextTo("elMarginBottom")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setMargin(\"" + element + "\",\"bottom\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td>
                        <span id="elMarginBottom">0</span>px
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.Global("RES_LEFT")
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "PaddingLeftSlider")
                                       .FillTextTo("elPaddingLeft")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setPadding(\"" + element + "\",\"left\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td style="padding-right: 10px;">
                        <span id="elPaddingLeft">0</span>px
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "MarginLeftSlider")
                                       .FillTextTo("elMarginLeft")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setMargin(\"" + element + "\",\"left\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td>
                        <span id="elMarginLeft">0</span>px
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.Global("RES_RIGHT")
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "PaddingRightSlider")
                                       .FillTextTo("elPaddingRight")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setPadding(\"" + element + "\",\"right\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td style="padding-right: 10px;">
                        <span id="elPaddingRight">0</span>px
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "MarginRightSlider")
                                       .FillTextTo("elMarginRight")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setMargin(\"" + element + "\",\"right\",ui.value);";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td>
                        <span id="elMarginRight">0</span>px
                    </td>
                </tr>
            </table>
        </section>
    </div>
    </text>);
           views.Add("CSS3").Template(@<text>
    <div style="background-color: #ffffff; color: #000000; padding: 5px; font-weight: normal;
        overflow: visible;">
        <section>
            <header class="d-section">
                <span>@Html.Global("RES_UI")</span>
                <hr />
            </header>
            <table>
                <tr>
                    <td>
                        @Html.Global("RES_RESIZE")
                    </td>
                    <td>
                        @(Ajax.Dna().ComboBox("cbResizeTypes")
                                        .DropDownStyle(DropdownStyles.DropdownList)
                                        .Options(opts => { opts.OnItemSelected = "css3SetResize(\"" + element + "\",ui.value);"; })
                                        .Select("both")
                                        .Width(130)
                                        .Items(_items =>
                                        {
                                            _items.AddValue("Both", "both");
                                            _items.AddValue("Horizontal", "horizontal");
                                            _items.AddValue("Vertical", "vertical");
                                        })
                        .GetHtml())
                    </td>
                </tr>
            </table>
        </section>
        <section>
            <header class="d-section">
                <span>@Html.Global("RES_SHADOW")</span>
                <hr />
            </header>
            <table>
                <tr>
                    <th style="text-align: center; height: 30px; width: 100px;">
                    </th>
                    <th style="text-align: center;" colspan="2">
                        @Html.Global("UIDesigner_Horizontal_Offset")
                    </th>
                    <th style="text-align: center;" colspan="2">
                        @Html.Global("UIDesigner_Vertical_Offset")
                    </th>
                    <th style="text-align: center;" colspan="2">
                        @Html.Global("UIDesigner_Blur_radius")
                    </th>
                    <th style="text-align: center;" colspan="2">
                        @Html.Global("RES_COLOR")
                    </th>
                </tr>
                <tr>
                    <td>
                        @Html.Global("RES_BOX_SHADOW")
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "BSHOffsetSlider")
                                               .FillTextTo("elBSHOffset")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setBoxShaow(\"" + element + "\",ui.value,$(\"#" + prefix + "BSVOffsetSlider\").val(),$(\"#" + prefix + "BSBlurSlider\").val(),$(\"#" + prefix + "BSColorPicker\").find(\".d-colorpicker-name\").val());";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td style="padding-right: 10px;">
                        <span id="elBSHOffset">0</span>px
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "BSVOffsetSlider")
                                               .FillTextTo("elBSVOffset")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setBoxShaow(\"" + element + "\",$(\"#" + prefix + "BSHOffsetSlider\").val(),ui.value,$(\"#" + prefix + "BSBlurSlider\").val(),$(\"#" + prefix + "BSColorPicker\").find(\".d-colorpicker-name\").val());";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td style="padding-right: 10px;">
                        <span id="elBSVOffset">0</span>px
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "BSBlurSlider")
                                               .FillTextTo("elBSBlurRadius")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setBoxShaow(\"" + element + "\",$(\"#" + prefix + "BSHOffsetSlider\").val(),$(\"#" + prefix + "BSVOffsetSlider\").val(),ui.value,$(\"#" + prefix + "BSColorPicker\").find(\".d-colorpicker-name\").val());";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td style="padding-right: 10px;">
                        <span id="elBSBlurRadius">0</span>px
                    </td>
                    <td style="padding: 0px 5px;">
                        @(Ajax.Dna().ColorPicker(prefix + "BSColorPicker")
                                .Options(opts =>
                                {
                                    opts.AllowInput = true;
                                    opts.DropDown = true;
                                    opts.OnColorSelected = "setBoxShaow(\"" + element + "\",$(\"#" + prefix + "BSHOffsetSlider\").val(),$(\"#" + prefix + "BSVOffsetSlider\").val(),$(\"#" + prefix + "BSBlurSlider\").val(),ui.value);";
                                })
                                .GetHtml()
                        )
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.Global("RES_TEXT_SHADOW")
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "TSHOffsetSlider")
                                               .FillTextTo("elTSHOffset")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setTextShaow(\"" + element + "\",ui.value,$(\"#" + prefix + "TSVOffsetSlider\").val(),$(\"#" + prefix + "TSBlurSlider\").val(),$(\"#" + prefix + "TSColorPicker\").find(\".d-colorpicker-name\").val());";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td style="padding-right: 10px;">
                        <span id="elTSHOffset">0</span>px
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "TSVOffsetSlider")
                                               .FillTextTo("elTSVOffset")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setTextShaow(\"" + element + "\",$(\"#" + prefix + "TSHOffsetSlider\").val(),ui.value,$(\"#" + prefix + "TSBlurSlider\").val(),$(\"#" + prefix + "TSColorPicker\").find(\".d-colorpicker-name\").val());";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td style="padding-right: 10px;">
                        <span id="elTSVOffset">0</span>px
                    </td>
                    <td style="width: 50px; padding: 0px 5px;">
                        @( Ajax.Dna().Slider(prefix + "TSBlurSlider")
                                               .FillTextTo("elTSBlurRadius")
                               .Options(opts =>
                               {
                                   opts.Step = 1;
                                   opts.Maximum = 100;
                                   opts.OnSliding = "setTextShaow(\"" + element + "\",$(\"#" + prefix + "TSHOffsetSlider\").val(),$(\"#" + prefix + "TSVOffsetSlider\").val(),ui.value,$(\"#" + prefix + "TSColorPicker\").find(\".d-colorpicker-name\").val());";
                               })
                               .Value(0)
                               .GetHtml())
                    </td>
                    <td style="padding-right: 10px;">
                        <span id="elTSBlurRadius">0</span>px
                    </td>
                    <td style="padding: 0px 5px;">
                        @(Ajax.Dna().ColorPicker(prefix + "TSColorPicker")
                                .Options(opts =>
                                {
                                    opts.AllowInput = true;
                                    opts.DropDown = true;
                                    opts.OnColorSelected = "setTextShaow(\"" + element + "\",$(\"#" + prefix + "TSHOffsetSlider\").val(),$(\"#" + prefix + "TSVOffsetSlider\").val(),$(\"#" + prefix + "TSBlurSlider\").val(),ui.value);";
                                })
                                .GetHtml()
                        )
                    </td>
                </tr>
            </table>
        </section>
    </div>
    </text>);
       })
       .Render();}
@Html.StartupScripts()
